<template>
  <div class="viewShow-header">
    <!-- 设备总数 -->
    <div class="child">
      <div>
        <span style="display: inline-block;">
          <p style="font-size: 16px;">设备总数</p>
          <p class="time-title">当前</p>
        </span>
      </div>
      <div style="padding: 10px 0 0 0;">
        <i class="iconfont icon-shebei"  style="font-size: 30px;margin-right: 10px;"></i>
        <span style="font-size: 27px;">{{this.equipStatus.totalEquipment}}</span>
      </div>
    </div>
    <el-divider direction="vertical"></el-divider>


    <!-- 传感器总数 -->
    <div class="child">
      <div>
        <span style="display: inline-block;">
          <p style="font-size: 16px;">传感器总数</p>
          <p class="time-title">当前</p>
        </span>
      </div>
      <div style="padding: 10px 0 0 0;">
        <i class="iconfont icon-chuanganqi-f"  style="font-size: 40px;margin-right: 10px;"></i>
        <span style="font-size: 28px;font-weight: 800;">{{this.equipStatus.totalSensor}}</span>
      </div>
    </div>
    <el-divider direction="vertical"></el-divider>





    <!-- 故障总数 -->
    <div class="child">
      <div>
        <span style="display: inline-block;">
          <p style="font-size: 16px;">故障总数</p>
          <p class="time-title">当前</p>
        </span>
      </div>
      <div style="padding: 10px 0 0 0;">
        <i class="iconfont icon-guzhang"  style="font-size: 35px;margin-right: 10px;"></i>
        <span style="font-size: 30px;color: red;font-weight: 800;">{{this.equipStatus.totalWrong}}</span>
      </div>
    </div>
    <el-divider direction="vertical"></el-divider>

    <!-- 停机时间 -->
    <div class="child">
      <div>
        <span style="display: inline-block;text-align: left;">
          <p style="font-size: 16px;">停机时间&emsp;</p>
          <p class="time-title">过去一个月&emsp;</p>
          <div style="padding: 10px 0 0 0;">
            <i class="iconfont icon-chakantiezishijian"  style="font-size: 27px;margin-right: 10px;"></i>
            <span style="font-size: 27px;font-weight: 800;">{{this.equipStatus.totalStopTime.split(':')[0]}}<span style="font-size: 17px;color: #4d77c1;">h</span>{{this.equipStatus.totalStopTime.split(':')[1]}}<span style="font-size: 17px;color: #4d77c1;">min</span>
            </span>
          </div>
        </span>
      </div>
    </div>
    <el-divider direction="vertical"></el-divider>

    <!-- 利用率 -->
    <div class="child">
      <div>
        <span style="display: inline-block;">
          <p style="font-size: 16px;text-align: left;">利用率</p>
          <p class="time-title">过去一个月&emsp;</p>
          <div style="padding: 10px 0 0 0;">
            <i class="iconfont icon-chart"  style="font-size: 23px;margin-right: 10px;"></i>
            <span style="font-size: 27px;font-weight: 800;">{{this.equipStatus.utilization}}<span style="font-size: 20px;color: #4d77c1;">%</span></span>
          </div>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
  export default{
    props:{
      equipStatus:Object
    }
  }
</script>

<style scoped="scoped">

  .viewShow-header{
    margin: 5px;
    height: 130px;
    background-color: rgb(3, 45, 137);
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .child{
    flex: 1;
    text-align: center;
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
  }
  .children-div{

  }

  .the-icon{
    font-size: 32px;
    margin-right: 20px;
  }
  .time-title{
    font-size: 12px;
    margin: 5px 0;
    text-align: left;
    color: #DCDFE6;
  }
</style>
